<script setup>
	import { ref } from 'vue';
	import { useUserStore } from '@/store/userInfo';
	// 自定义icon
	const customIcons = [
		{ name: "yuan-31daifukuan", text: "待付款" },
		{ name: "yuan-daifahuo", text: "待发货" },
		{ name: "yuan-daiquhuo", text: "待取货" },
		{ name: "yuan-quanbudingdan1", text: "全部订单" }
	]
	// 用户store
	const userStore = useUserStore( )
	// 跳转订单页
	const goOrder = ( text ) => {
		// 如果用户登录直接跳转，没有登录要求先登录
		if ( userStore.userInfo.uid ) {
			uni.navigateTo( {
				url: `/pages/order/order?state=${text}`
			} )
		} else {
			uni.showToast( {
				icon: "none",
				title: "请点击登录",
				mask: true
			} )
		}
	}
</script>
<template>
	<view class="order">
		<view class="orderBox">
			<view class="title">
				我的订单
			</view>
			<!-- 类型 -->
			<view class="type">
				<!-- 操作点击区域 -->
				<view class="item" v-for="(item,index) in customIcons" :key="index"
					@tap="goOrder(item.text)">
					<uni-icons custom-prefix="iconfont" color="#969696" :size="26"
						:type="item.name"></uni-icons>
					<view class="text">
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<style lang="scss" scoped>
	/*订单区域*/
	.order {
		padding: 24rpx;

		/*订单内容*/
		.orderBox {
			padding: 16rpx;
			border-radius: 24rpx;
			background-color: #fff;

			.title {
				font-weight: bold;
				color: $text-font-color-1;
			}

			/*订单类型*/
			.type {
				padding: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				/*每一项状态*/
				.item {
					text-align: center;

					.icon {
						margin-bottom: 8rpx;
					}

					.text {
						font-size: 24rpx;
						color: $text-font-color-2;
					}
				}
			}
		}
	}
</style>